<template>
  <div class="contentwarp">
    <div class="header">
      <div class="topbox">
        <div class="topbox_l">
          <img src="../../assets/images/llogo.png" />
        </div>
        <div class="topbox_m">陕西省气象局媒体资源运营平台</div>
        <div class="topbox_user">
          <img src="../../assets/images/tx.png" />
        </div>
        <div class="topbox_r">
          <img src="../../assets/images/weather_1.png" />
          <p class="t">
            <b>20°</b>晴天多云
          </p>
          <p class="m">2018-03-08 09:30</p>
        </div>
      </div>
    </div>
    <div class="mainer">
      <div class="mainbox">
        <div class="main_l">
          <div class="ibox ibox1">
            <div class="ibox_t">资源饱和度</div>
            <div class="ibox_m">
              <div class="istats">
                <echart name="che1" :data="obj"></echart>
                <!-- <div class="box" data-num="75" id="istats_1"><p class="m"><i></i>%</p><p class="bg"></p><p class="bgs"></p></div><div class="t">总体饱和度</div> -->
              </div>

              <div class="ilist1">
                <ul>
                  <li class="c1">
                    <echart name="che12" :data="obj1"></echart>
                  </li>
                  <li class="c2">
                    <echart name="che125" :data="obj1"></echart>
                  </li>
                  <li class="c3">
                    <echart name="che124" :data="obj1"></echart>
                  </li>
                  <li class="c4">
                    <echart name="che123" :data="obj1"></echart>
                  </li>
                </ul>
              </div>
            </div>
            <div class="ibox_bll"></div>
            <div class="ibox_blr"></div>
            <div class="ibox_bbl"></div>
            <div class="ibox_bbr"></div>
          </div>

          <div class="ibox ibox2">
            <div class="ibox_t">当月资源饱和情况</div>
            <div class="ibox_m">
              <div class="echarts_box" id="echarts_1">
                <echart name="che12334" :data="radarOption"></echart>
              </div>
            </div>
            <div class="ibox_bll"></div>
            <div class="ibox_blr"></div>
            <div class="ibox_bbl"></div>
            <div class="ibox_bbr"></div>
          </div>
        </div>

        <div class="main_m">
          <div class="map_box">
            <div class="map_tit">电视/电台 资源分布</div>
            <div class="map_tit2">188, 888, 888</div>
            <div class="map_tab">
              <ul>
                <li>
                  <i style="background:#174cff;"></i>1万以上
                </li>
                <li>
                  <i style="background:#0e3cd8;"></i>5千~1万
                </li>
                <li>
                  <i style="background:#0027ab;"></i>5千以下
                </li>
              </ul>
            </div>
            <div class="echarts_box" id="echarts_2">
              <echart v-if="status" name="1chesa123" :data="map"></echart>
            </div>
          </div>

          <div class="ibox ibox3">
            <div class="ibox_t">资源饱和度对比</div>
            <div class="ibox_m">
              <div class="ilist3">
                <div class="item">
                  <div class="dashboard_box dashboard_box1">
                    <echart name="che1233s4" :data="ybp"></echart>
                    <!-- <div class="t">电视</div>
                    <div
                      class="gaugemeter"
                      id="gaugemeter1"
                      data-percent="36"
                      data-append="%"
                      data-label="同比下降"
                      data-color="#65c548"
                      data-style="Arch"
                    ></div>-->
                  </div>
                  <div class="ft">去年: 1000 ~ 今年: 640</div>
                </div>
                <div class="item">
                  <div class="dashboard_box dashboard_box2">
                    <echart name="che1233s42" :data="ybp"></echart>
                    <!-- <div class="t">广播</div>
                    <div
                      class="gaugemeter"
                      id="gaugemeter2"
                      data-percent="0"
                      data-append="%"
                      data-label="同比持平"
                      data-color="#ffbf1f"
                      data-style="Arch"
                    ></div>-->
                  </div>
                  <div class="ft">去年: 1000 ~ 今年: 640</div>
                </div>
                <div class="item">
                  <div class="dashboard_box dashboard_box3">
                    <echart name="che1233s6" :data="ybp"></echart>
                  </div>
                  <div class="ft">去年: 1000 ~ 今年: 640</div>
                </div>
                <div class="item">
                  <div class="dashboard_box dashboard_box4">
                    <echart name="che1233ss4" :data="ybp"></echart>
                  </div>
                  <div class="ft">去年: 1000 ~ 今年: 640</div>
                </div>
              </div>
            </div>
            <div class="ibox_bll"></div>
            <div class="ibox_blr"></div>
            <div class="ibox_bbl"></div>
            <div class="ibox_bbr"></div>
          </div>
        </div>

        <div class="main_r">
          <div class="ibox ibox4">
            <div class="ibox_t">月度销售额变化趋势</div>
            <div class="ibox_m">
              <div class="echarts_box" id="echarts_3">
                <echart name="cshe1233ss4" :data="zzt"></echart>
              </div>
            </div>
            <div class="ibox_bll"></div>
            <div class="ibox_blr"></div>
            <div class="ibox_bbl"></div>
            <div class="ibox_bbr"></div>
          </div>

          <div class="ibox ibox5">
            <div class="ibox_t">当月各部分资源收入占比</div>
            <div class="ibox_m">
              <div class="echarts_box" id="echarts_4">
                <echart name="csshe1233ss4" :data="zb"></echart>
              </div>
            </div>
            <div class="ibox_bll"></div>
            <div class="ibox_blr"></div>
            <div class="ibox_bbl"></div>
            <div class="ibox_bbr"></div>
          </div>

          <div class="ibox ibox6">
            <div class="ibox_t">近五年占版率</div>
            <div class="ibox_m">
              <div class="ilist5">
                <div class="item">
                  <div class="t">
                    2018
                    <b>72%</b>
                  </div>
                  <div class="m">
                    <i style="width:72%"></i>
                  </div>
                </div>
                <div class="item">
                  <div class="t">
                    2017
                    <b>43%</b>
                  </div>
                  <div class="m">
                    <i style="width:43%"></i>
                  </div>
                </div>
                <div class="item">
                  <div class="t">
                    2016
                    <b>53%</b>
                  </div>
                  <div class="m">
                    <i style="width:53%"></i>
                  </div>
                </div>
                <div class="item">
                  <div class="t">
                    2015
                    <b>71%</b>
                  </div>
                  <div class="m">
                    <i style="width:71%"></i>
                  </div>
                </div>
                <div class="item">
                  <div class="t">
                    2014
                    <b>72%</b>
                  </div>
                  <div class="m">
                    <i style="width:60%"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="ibox_bll"></div>
            <div class="ibox_blr"></div>
            <div class="ibox_bbl"></div>
            <div class="ibox_bbr"></div>
          </div>
        </div>

        <div class="clear"></div>
      </div>
    </div>
    <div class="footer">
      <div class="footbox">
        <div class="tit">最新公告</div>
        <div class="con">
          <el-carousel height="49px" indicator-position="none" :interval="5000" direction="horizontal"  :autoplay="true">
    <el-carousel-item v-for="item in 3" :key="item">
       <ul>
            <li>
              <b class="c1">01/20</b>即将到期资源：北京市、哈尔滨、南京、福州
            </li>
            <li>
              <b class="c2">01/19</b>TOP5未售资源：乌鲁木齐、西宁、兰州、拉萨、贵州
            </li>
            <li>
              <b class="c3">01/18</b>TOP5出售资源：北京、上海、广州、天津、石家庄
            </li>
            <li>
              <b class="c4">01/17</b>热烈祝贺华风集团媒体资源运营平台成功上线
            </li>
            <li>
              <b class="c5">01/16</b>当月各部分资源收入占比统计图已生成，欢迎查阅
            </li>
          </ul>
    </el-carousel-item>
  </el-carousel>
         
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echart from "./echart.vue";
import map from "./map/china.js";
var geoCoordMap = {
  北京: [16.39737, 39.939502],
  天津: [117.133262, 39.256321],
  上海: [121.36464, 31.303465],
  重庆: [106.32485, 29.895013],
  河北: [114.336873, 38.21885],
  山西: [112.349964, 38.044464],
  辽宁: [123.241164, 41.948112],
  吉林: [125.228072, 43.894927],
  黑龙江: [1126.479088, 45.985284],
  江苏: [118.715429, 32.246466],
  浙江: [120.040035, 30.350837],
  安徽: [117.170056, 31.99595],
  福建: [119.156964, 26.182279],
  江西: [115.808656, 28.774611],
  山东: [116.912494, 36.812038],
  河南: [113.453802, 34.895028],
  湖北: [114.116105, 30.764814],
  湖南: [112.800698, 28.474291],
  广东: [113.233035, 23.224606],
  海南: [110.179083, 19.921006],
  四川: [103.924003, 30.796585],
  贵州: [106.499624, 26.844365],
  云南: [102.599397, 25.248948],
  陕西: [108.780889, 34.408508],
  甘肃: [103.66644, 36.218003],
  青海: [101.605943, 36.752842],
  西藏: [90.972306, 29.838888],
  广西: [108.265765, 23.020403],
  内蒙古: [111.614073, 40.951504],
  宁夏: [106.094884, 38.624116],
  新疆: [87.476819, 43.894927],
  香港: [114.1529, 22.542716],
  澳门: [113.417008, 22.337477],
  台湾: [121.36464, 25.248948]
};
export default {
  components: {
    echart
  },
  data() {
    return {
      zb: {
        color: ["#ff3738", "#00acf4", "#2ec753", "#ffbb11"],
        calculable: true,
        series: [
          {
            type: "pie",
            radius: [37, 85],
            roseType: "area",
            label: {
              fontSize: 18,
              lineHeight: 26,
              formatter: "{b}\n{c}%",
              padding: 8,
              color: "#fff"
            },
            data: [
              { value: 20, name: "自营" },
              { value: 45.5, name: "联播" },
              { value: 24, name: "自营资源" },
              { value: 10.5, name: "承包" }
            ]
          }
        ]
      },
      obj: {
        // 图表主标题
        title: {
          text: "全国就业率", // 主标题文本，支持使用 \n 换行
          top: "70%", // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          left: "center", // 值: 'left', 'center', 'right' 同上
          textStyle: {
            // 文本样式
            fontSize: 20,
            fontWeight: 600,
            color: "#fff"
          }
        },
        // 提示框组件
        tooltip: {
          trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            color: "#fff" // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 水球图: {a}（系列名称），{b}（无），{c}（数值）
          // 使用函数模板   传入的数据值 -> value: number|Array,
          formatter: function(value) {
            return value.seriesName + ": " + value.data * 100 + "%";
          }
        },
        series: [
          {
            type: "liquidFill",
            name: "全国就业率", // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: "87%", // 水球图的半径
            center: ["50%", "50%"], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: "circle",
            phase: 0, // 波的相位弧度 不设置  默认自动
            direction: "right", // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 1, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: "#fff", // 边框的阴影颜色,
                borderColor: "#41dcd8" // 边框颜色
              }
            },
            // 图形样式
            itemStyle: {
              color: "#4077eb", // 水球显示的背景颜色
              opacity: 0.5, // 波浪的透明度
              shadowBlur: 10 // 波浪的阴影范围
            },
            backgroundStyle: {
              color: "#407bf3", // 水球未到的背景颜色
              opacity: 0.5
            },
            // 图形的高亮样式
            emphasis: {
              itemStyle: {
                opacity: 0.8 // 鼠标经过波浪颜色的透明度
              }
            },
            // 图形上的文本标签
            label: {
              fontSize: 55,
              fontWeight: 400,
              color: "#fff"
            },
            data: [0.62] // 系列中的数据内容数组
          }
        ]
      },
      obj1: {
        // 图表主标题
        title: {
          text: "手机", // 主标题文本，支持使用 \n 换行
          top: "70%", // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          left: "center", // 值: 'left', 'center', 'right' 同上
          textStyle: {
            // 文本样式
            fontSize: 14,
            fontWeight: 500,
            color: "#fff"
          }
        },
        // 提示框组件
        tooltip: {
          trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            color: "#fff" // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 水球图: {a}（系列名称），{b}（无），{c}（数值）
          // 使用函数模板   传入的数据值 -> value: number|Array,
          formatter: function(value) {
            return value.seriesName + ": " + value.data * 100 + "%";
          }
        },
        series: [
          {
            type: "liquidFill",
            name: "全国就业率", // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: "60%", // 水球图的半径
            center: ["50%", "32%"], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: "circle",
            phase: 0, // 波的相位弧度 不设置  默认自动
            direction: "right", // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 1, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: "#fff", // 边框的阴影颜色,
                borderColor: "#41dcd8" // 边框颜色
              }
            },
            // 图形样式
            itemStyle: {
              color: "#4077eb", // 水球显示的背景颜色
              opacity: 0.5, // 波浪的透明度
              shadowBlur: 10 // 波浪的阴影范围
            },
            backgroundStyle: {
              color: "#407bf3", // 水球未到的背景颜色
              opacity: 0.5
            },
            // 图形的高亮样式
            emphasis: {
              itemStyle: {
                opacity: 0.8 // 鼠标经过波浪颜色的透明度
              }
            },
            // 图形上的文本标签
            label: {
              fontSize: 16,
              fontWeight: 400,
              color: "#fff"
            },
            data: [0.62] // 系列中的数据内容数组
          }
        ]
      },

      radarOption: {
        radar: {
          center: ["50%", "50%"],
          startAngle: 90,
          indicator: [
            { name: "覆盖", max: 10 },
            { name: "干扰", max: 20 },
            { name: "感知", max: 10 },
            { name: "故障", max: 10 },
            { name: "容量", max: 10 }
          ],
          splitNumber: 5,
          radius: "60%",
          shape: "circle",
          name: {
            show: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 12
            }
          },
          splitArea: {
            areaStyle: {
              color: ["rgba(0, 21, 102, 0.4)"]
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(238,238,238, 0.2)"]
            }
          },
          axisLine: {
            lineStyle: {
              color: ["rgba(238,238,238, 0.2)"]
            }
          }
        },
        //极坐标系
        polar: {
          radius: "60%"
        },
        angleAxis: {
          axisLine: {
            lineStyle: {
              color: "rgba(238,238,238, 0.2)"
            }
          }
        },
        radiusAxis: {
          //用注释掉的这个用法可以动态控制刻度的个数，但有时候会出现刻度标签显示不全的现象
          // type: 'value',
          // min: 0,
          // max: 10,
          // interval: 2
          type: "category",
          axisLabel: {
            show: true,
            interval: 0,
            fontSize: 9,
            color: "rgba(255, 255, 255, 0.5)"
          },
          axisTick: {
            show: true,
            inside: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(238,238,238, 0.2)"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(238,238,238, 0.2)"
            }
          },
          data: ["2", "4", "6", "8", "10"]
        },
        tooltip: {
          show: false,
          trigger: "item"
        },
        series: [
          {
            type: "radar",
            radarIndex: 0,
            data: [
              {
                value: [7.9, 3, 3, 5.11, 4.4]
              }
            ],
            symbol: "rect",
            symbolSize: 6,
            itemStyle: {
              normal: {
                color: "rgba(255, 255,255, 1)",
                borderColor: "rgba(255, 179, 0, 1)",
                borderWidth: 1
              }
            },
            areaStyle: {
              normal: {
                color: "rgba(255, 179, 0, 0.8)"
              }
            },
            lineStyle: {
              width: 2,
              color: "rgba(255, 179, 0, 1)"
            }
          }
        ]
      },
      ybp: {
        // 图表主标题
        title: {
          text: "手机", // 主标题文本，支持使用 \n 换行
          top: "80%", // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          left: "center", // 值: 'left', 'center', 'right' 同上
          textStyle: {
            // 文本样式
            fontSize: 18,
            fontWeight: 500,
            color: "#fff"
          }
        },
        viewMap: {
          symbol: "circle"
        },
        // tooltip : {
        //     formatter: "{a}:{c}%"
        // },

        series: [
          {
            name: "同比递减",
            type: "gauge",
            radius: "92%",
            splitNumber: 0,
            center: ["50%", "50%"],
            startAngle: 235, //开始角度
            endAngle: -55, //结束角度
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },

            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 21,
                shadowBlur: 10,
                color: [
                  ["0.5", "#66cc33"],
                  ["0.5", "rgba(225,225,225,0)"]
                ]
              }
            },

            detail: {
              offsetCenter: ["0%", "20%"], // x, y，单位px
              // color:"#ff0000",
              formatter: ["{a|同比下降}", "{b|{value}%}"].join("\n"),
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "bolder",
                color: "#fff"
              },
              rich: {
                lineHeight: "80",
                a: {
                  fontSize: 16,
                  fontWeight: 450,
                  color: "#999999"

                  //  lineHeight:'6\0',
                },
                b: {
                  fontSize: 18,
                  fontWeight: 500,
                  color: "#fff",
                  lineHeight: "50"
                }
              }
            },
            data: [
              {
                value: 50,
                label: {
                  textStyle: {
                    score: {
                      color: "red"
                    }
                  }
                }
              }
            ]
          }
        ]
      },
      zzt: {
        grid: {
          left: "20px",
          right: "20px",
          bottom: "10px",
          top: "70px",
          containLabel: true
        },
        legend: {
          textStyle: { color: "#fff" },
          x: "center",
          y: "40px"
        },
        xAxis: {
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          boundaryGap: false,
          axisLine: { onZero: false, lineStyle: { color: "#123574" } },
          axisTick: { show: false },
          axisLabel: {
            interval: 1,
            textStyle: { fontSize: 12, color: "#ffffff" }
          },
          splitLine: { show: false, lineStyle: { color: "#1b2143" } }
        },
        yAxis: [
          {
            type: "value",
            axisLine: { onZero: false, lineStyle: { color: "#123574" } },
            axisTick: { show: false },
            axisLabel: { textStyle: { fontSize: 12, color: "#3badeb" } },
            splitLine: { lineStyle: { color: "#1b2143" } },
            name: "销售额(百万)",
            nameGap: 35,
            nameTextStyle: { color: "#ffffff" }
          },
          {
            type: "value",
            axisLine: { onZero: false, lineStyle: { color: "#123574" } },
            axisTick: { show: false },
            axisLabel: { textStyle: { fontSize: 12, color: "#3badeb" } },
            splitLine: { lineStyle: { color: "#1b2143" } },
            name: "增长率",
            nameGap: 35,
            nameTextStyle: { color: "#ffffff" }
          }
        ],
        series: [
          {
            name: "销售额",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#2c80fb",
                barBorderRadius: [2, 2, 0, 0]
              },
              emphasis: {
                color: "#4f96fd",
                barBorderRadius: [2, 2, 0, 0]
              }
            },
            barWidth: 16,
            zlevel: 10,
            data: [10, 20, 30, 40, 50, 80, 110, 170, 40, 30, 20, 10]
          },
          {
            name: "同比增长率",
            type: "line",
            yAxisIndex: 1,
            symbol: "circle",
            showSymbol: false,
            itemStyle: { color: "#ffbb11" },
            lineStyle: { color: "#ffbb11", width: 1 },
            smooth: true,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255, 187, 17, 0.7)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 0, 0, 0.1)"
                  }
                ]
              }
            },
            zlevel: 10,
            data: [10, 0, -10, -20, -10, 0, 20, 30, 50, 20, 0, -10]
          },
          {
            name: "环比增长率",
            type: "line",
            yAxisIndex: 1,
            symbol: "circle",
            showSymbol: false,
            itemStyle: { color: "#2ec753" },
            lineStyle: { color: "#2ec753", width: 1 },
            smooth: true,
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(46, 199, 83, 0.7)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 0, 0, 0.1)"
                  }
                ]
              }
            },
            zlevel: 10,
            data: [60, 90, 70, 120, 45, 145, 70, 50, -50, -30, -40, -20]
          }
        ]
      },
      list: [
        { name: "北京", value: 15000 },
        { name: "天津", value: 3000 },
        { name: "上海", value: 4000 },
        { name: "重庆", value: 4000 },
        { name: "河北", value: 8000 },
        { name: "甘肃", value: 6000 },
        { name: "河南", value: 12000 }
      ],
      status: false,
      map: {
        color: ["#ffbf1f"],
        tooltip: {
          trigger: "item",
          confine: true,
          // padding: [8, 15],
          textStyle: { color: "#ffffff", fontSize: 14 },
          formatter: function(params) {
            // console.log(params)
            if (typeof params.value[2] == "undefined") {
              return params.name + " : " + params.value;
            } else {
              return params.name + " : " + params.value[2];
            }
          }
        },
        geo: {
          map: "china",
          roam: false,
          zoom: 1.1,
          label: {
            normal: { show: false },
            emphasis: { show: false }
          }, //鼠标指向后是否显示省份名称
          regions: [], //隐藏南海
          itemStyle: {
            normal: {
              areaColor: "#001869",
              borderColor: "#2852c8"
            },
            emphasis: {
              areaColor: "#052285"
            }
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: function(val) {
              return val[2] / 800;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            data: []
          }
        ]
      }
    };
  },
  created() {
    var list = this.convertDatacolor(this.list);
    this.map.geo.regions = list;
    var arr = this.convertData(this.list);
    this.map.series[0].data = arr;
    this.status = true;
    console.log(this.map);
    // console.log(this.status);
  },
  methods: {
    convertData(data) {
      // console.log(data);
      var res = [];
      for (var i = 0; i < data.length; i++) {
        // console.log("................")
        var geoCoord = geoCoordMap[data[i].name];
        // console.log(geoCoord);
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    },
    convertDatacolor(data) {
      // console.log(data)
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var cocolor = "";
        if (data[i].value < 5000) {
          cocolor = "#0027ab";
        }
        if ((data[i].value > 5000) & (data[i].value < 10000)) {
          cocolor = "#0e3cd8";
        }
        if (data[i].value > 10000) {
          cocolor = "#174cff";
        }
        res.push({
          name: data[i].name,
          itemStyle: { normal: { areaColor: cocolor, borderColor: "#3e72fd" } }
        });
      }
      // console.log('.......');
      // console.log(res)
      return res;
    }
  }
};
</script>
<style lang="scss" scoped>
.contentwarp {
  width: 100%;
  // height: 100vh;
  // background: red;
  background: url("../../assets/images/bg.jpg") center top no-repeat #000000;
  background-size: cover;
  font-family: "Microsoft YaHei";
}
.topbox {
  background: url("/images/topbg.png") center top no-repeat;
  height: 71px;
  margin: 0 20px;
  position: relative;
}
.topbox_l {
  position: absolute;
  left: 0;
  top: 15px;
}
.topbox_l img {
  display: block;
}
.topbox_m {
  line-height: 65px;
  text-align: center;
  font-size: 30px;
  color: #00b8cb;
  font-weight: bold;
  letter-spacing: 5px;
}
.topbox_m img {
  display: block;
  margin: 0 auto;
}
.topbox_user {
  position: absolute;
  right: 0;
  top: 17px;
}
.topbox_user img {
  display: block;
  width: 36px;
  border-radius: 50%;
}
.topbox_r {
  position: absolute;
  right: 50px;
  top: 7px;
}
.topbox_r img {
  position: absolute;
  right: 105%;
  top: 0;
  height: 56px;
}
.topbox_r .t {
  font-size: 12px;
  color: #fff;
  // padding-top: 10px;
  line-height: 20px;
}
.topbox_r .t b {
  font-size: 20px;
  margin-right: 15px;
  font-weight: normal;
}
.topbox_r .m {
  font-size: 12px;
  // line-height: 16px;
  // opacity: 0.3;
  color: #fff;
}

/*中间框架*/
.mainer {
  position: relative;
  padding-bottom: 55px;
  z-index: 99;
}

.mainbox {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.main_l {
  float: left;
  width: 23%;
}

.main_m {
  float: left;
  width: 52%;
}

.main_r {
  float: right;
  width: 23%;
}

.ibox {
  position: relative;
  border: 1px #154791 solid;
  border: 1px rgba(33, 133, 242, 0.3) solid;
  background: url("../../assets/images/boxbg.png") no-repeat
    rgba(19, 23, 72, 0.3);
  box-shadow: rgba(39, 115, 255, 0.25) 0px 0px 40px inset;
}
.ibox1 {
  height: 488px;
  margin-bottom: 19px;
}
.ibox2 {
  height: 428px;
}
.ibox3 {
  height: 268px;
  background: rgba(19, 23, 72, 0.3);
}
.ibox4 {
  height: 278px;
  margin-bottom: 19px;
}
.ibox5 {
  height: 298px;
  margin-bottom: 19px;
}
.ibox6 {
  height: 318px;
}

.map_box {
  height: 669px;
  background: url("../../assets/images/mapbg.png") center top no-repeat;
  position: relative;
}
#echarts_2 {
  width: 100%;
  height: 669px;
}
.map_tit {
  position: absolute;
  left: 40px;
  top: 10px;
  font-size: 16px;
  color: #fff;
  line-height: 32px;
}
.map_tit2 {
  position: absolute;
  left: 40px;
  top: 42px;
  font-size: 60px;
  color: #00fff0;
  line-height: 62px;
  font-family: "DIN-Medium";
}
.map_tab {
  position: absolute;
  left: 40px;
  bottom: 60px;
}
.map_tab ul li {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 14px;
  height: 14px;
  color: #a5a4a7;
}
.map_tab ul li i {
  float: left;
  height: 14px;
  width: 40px;
  margin-right: 8px;
}

.ibox_t {
  position: absolute;
  top: -10px;
  left: 20px;
  line-height: 20px;
  font-size: 18px;
  color: #3badeb;
}
.ibox_m {
  position: relative;
}

.ibox_bll {
  position: absolute;
  left: -1px;
  top: -10px;
  width: 3px;
  height: 20px;
  background: #2773ff;
}
.ibox_blr {
  position: absolute;
  right: -1px;
  top: -2px;
  width: 8px;
  height: 8px;
  border-top: 2px #2773ff solid;
  border-right: 2px #2773ff solid;
}
.ibox_bbl {
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-bottom: 2px #2773ff solid;
  border-left: 2px #2773ff solid;
}
.ibox_bbr {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-bottom: 2px #2773ff solid;
  border-right: 2px #2773ff solid;
}

.ibox1 .ibox_m {
  padding-top: 20px;
}

.istats {
  background: url("../../assets/images/box1.png") center center no-repeat;
  width: 282px;
  height: 246px;
  margin: 20px auto;
  position: relative;
}

.istats .box {
  display: block;
  width: 210px;
  height: 210px;
  border-radius: 105px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.istats .box .m {
  position: absolute;
  left: 0;
  top: 90px;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 56px;
  font-weight: normal;
  line-height: 70px;
  z-index: 92;
  position: relative;
  color: #fff;
}
.istats .box .m i {
  font-style: normal;
}
.istats .box .bg {
  display: block;
  width: 210px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url("../../assets/images/istats_bg.png") center top no-repeat;
  z-index: 90;
}
.istats .box .bgs {
  background: url("../../assets/images/istats.png") center center no-repeat;
  width: 210px;
  height: 210px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 91;
}

.istats .t {
  font-size: 18px;
  color: #fff;
  position: absolute;
  left: 0;
  top: 95px;
  width: 100%;
  text-align: center;
  line-height: 20px;
}

.ilist1 {
  height: 110px;
  width: 100%;
}
.ilist1 ul {
  display: flex;
  list-style: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-left: 0;
  padding: 0;
}
.ilist1 ul li {
  float: left;
  width: 25%;
  height: 110px;
  position: relative;
}
.ilist1 ul li .box {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 35px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.ilist1 ul li .box .m {
  display: block;
  text-align: center;
  font-size: 20px;
  line-height: 70px;
  z-index: 92;
  position: relative;
  color: #fff;
  font-family: "DIN-Medium";
}
.ilist1 ul li .box .m i {
  font-style: normal;
}
.ilist1 ul li .box .bg {
  display: block;
  width: 70px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 91;
}
.ilist1 ul li .box .bgs {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 14px;
  z-index: 90;
}
// .ilist1 ul li.c1 {
//   background: url("../../assets/images/ilist1_c1.png") center top no-repeat;
// }
// .ilist1 ul li.c2 {
//   background: url("../../assets/images/ilist1_c2.png") center top no-repeat;
// }
// .ilist1 ul li.c3 {
//   background: url("../../assets/images/ilist1_c3.png") center top no-repeat;
// }
// .ilist1 ul li.c4 {
//   background: url("../../assets/images/ilist1_c4.png") center top no-repeat;
// }
// .ilist1 ul li.c1 .box .bg {
//   background: #ffbf1f;
// }
// .ilist1 ul li.c2 .box .bg {
//   background: #ff3738;
// }
// .ilist1 ul li.c3 .box .bg {
//   background: #41aaf2;
// }
// .ilist1 ul li.c4 .box .bg {
//   background: #ab40db;
// }
.ilist1 ul li.c1 .box .bgs {
  background: url("../../assets/images/ilist1_b1.png") center top no-repeat;
}
.ilist1 ul li.c2 .box .bgs {
  background: url("../../assets/images/ilist1_b2.png") center top no-repeat;
}
.ilist1 ul li.c3 .box .bgs {
  background: url("../../assets/images/ilist1_b3.png") center top no-repeat;
}
.ilist1 ul li.c4 .box .bgs {
  background: url("../../assets/images/ilist1_b4.png") center top no-repeat;
}

.ilist1 ul li .t {
  display: block;
  text-align: center;
  font-size: 12px;
  line-height: 36px;
  color: #fff;
}

#echarts_1 {
  width: 360px;
  height: 320px;
  margin: 60px auto 0 auto;
  // background: url("../../assets/images/echarts_1.png") center center no-repeat;
}

.ilist3 {
  padding: 35px 23px 0px 23px;
}
.ilist3 .item {
  float: left;
  width: 25%;
}
.ilist3 .item .ft {
  text-align: center;
  color: #fff;
  font-size: 12px;
  line-height: 36px;
}

.dashboard_box {
  width: 180px;
  height: 175px;
  padding-top: 5px;
  margin: 0 auto;
  position: relative;
}
.dashboard_box .t {
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #fff;
  line-height: 26px;
}
.dashboard_box1 {
  //border: 2px dotted  #003333;
  // border-radius: 50%;
  background: url("../../assets/images/dashboard_box1.png") center top no-repeat;
}
.dashboard_box2 {
  background: url("../../assets/images/dashboard_box2.png") center top no-repeat;
}
.dashboard_box3 {
  background: url("../../assets/images/dashboard_box3.png") center top no-repeat;
}
.dashboard_box4 {
  background: url("../../assets/images/dashboard_box4.png") center top no-repeat;
}

.gaugemeter {
  position: relative;
  z-index: 100;
  width: 170px;
  margin: 0 auto;
}
.gaugemeter span {
  display: block;
  position: absolute;
  left: 0;
  top: 81px;
  width: 100%;
  text-align: center;
  height: 38px;
  line-height: 32px;
  font-size: 30px;
  color: #fff;
  overflow: hidden;
  font-family: "DIN-Medium";
}
.gaugemeter span u {
  text-decoration: none;
}
.gaugemeter b {
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
  width: 100%;
  text-align: center;
  height: 14px;
  line-height: 14px;
  font-size: 12px;
  color: #fff;
  overflow: hidden;
  font-weight: normal;
  opacity: 0.6;
}
.gaugemeter canvas {
}

#echarts_3 {
  width: 428px;
  height: 278px;
}
#echarts_4 {
  width: 428px;
  height: 298px;
  background: url("../../assets/images/echarts_4.png") center center no-repeat;
}

.ilist5 {
  padding: 35px 29px 0px 29px;
}
.ilist5 .item {
  margin-bottom: 9px;
}
.ilist5 .item .t {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #fff;
  position: relative;
  font-family: Arial;
}
.ilist5 .item .t b {
  position: absolute;
  right: 0;
  top: 0;
  color: #00eaf7;
  font-family: "DIN-Medium";
}
.ilist5 .item .m {
  display: block;
  position: relative;
  background: #272d68;
  height: 6px;
  border-radius: 3px;
}
.ilist5 .item .m i {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: #005bff;
  background-image: -webkit-gradient(
    linear,
    0% 0%,
    100% 0%,
    from(#005bff),
    to(#01bafa)
  );
  height: 6px;
  border-radius: 3px;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  height: 49px;
  border-top: 1px #142b68 solid;
  background: #0f1942;
  z-index: 999;
}
.footbox {
  // position: relative;
  // padding-left: 101px;
  width: 100%;
  display: flex;
}
.footbox .tit {
  // position: absolute;
  // left: 0;
  // top: 0;
  background: #112051;
  height: 49px;
  line-height: 49px;
  text-align: center;
  font-size: 16px;
  color: #0ec5fb;
  font-weight: bold;
  width: 100px;
  border-right: 1px #183a88 solid;
}
.footbox .con {
  height: 49px;
  flex: 1;;
  // width: calc(100%-100px);
  background: url("../../assets/images/hbg.png") left top no-repeat;
}
.footbox .con ul {
  width: 100%;
  display: flex;
  align-items: center;
}
.footbox .con ul li {
  float: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 18%;
  height: 49px;
  overflow: hidden;
  font-size: 12px;
  // line-height: 49px;
  color: #aad4ff;
  margin: 0 1%;
}
.footbox .con ul li b {
  display: inline-block;
  width: 48px;
  height: 18px;
  line-height: 18px;
  border-radius: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  position: relative;
  margin-right: 11px;
  vertical-align: middle;
  font-weight: normal;
  margin-bottom: 3px;
  position: relative;
}
.footbox .con ul li b:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  position: absolute;
  right: -4px;
  top: 5px;
}
.footbox .con ul li b.c1 {
  background: #ffbf1f;
  color: #333333;
}
.footbox .con ul li b.c1:after {
  border-left: 4px solid #ffbf1f;
}
.footbox .con ul li b.c2 {
  background: #ec4747;
}
.footbox .con ul li b.c2:after {
  border-left: 4px solid #ec4747;
}
.footbox .con ul li b.c3 {
  background: #41aaf2;
}
.footbox .con ul li b.c3:after {
  border-left: 4px solid #41aaf2;
}
.footbox .con ul li b.c4 {
  background: #65c548;
}
.footbox .con ul li b.c4:after {
  border-left: 4px solid #65c548;
}
.footbox .con ul li b.c5 {
  background: #ab40db;
}
.footbox .con ul li b.c5:after {
  border-left: 4px solid #ab40db;
}
</style>